<template>
    <div class="note-list">
        <ul>
            <li v-for="item in noteList" :key="item.id" @click="goNoteDetail(item.id)">
                <div class="img">
                    <img :src="item.head_img" alt="">
                </div>
                <div class="time">
                    {{ item.m_time }}
                </div>
                <div class="title">
                    {{ item.title }}
                </div>
            </li>

        </ul>
    </div>
</template>

<script setup>
import axios from '@/api';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
const route = useRoute();//获取当前活跃的路由信息，返回一个响应式对象包含路由的所有信息如：query
const router = useRouter();//获取整个路由实例
const noteList = ref([])


//console.log(route)
async function getData() {

    //向后端请求某分类下的日记列表数据
    const res = await axios.get('/findNoteListByType', {//第一个参数为地址，第二个为参数
        params: {
            note_type: route.query.title
        }
    })
    //console.log(res)
    noteList.value = res.data;
}
getData()

const goNoteDetail = (id) => {
    router.push({ path: '/noteDetail', query: { id: id } })
}




</script>

<style lang="less" scoped>
.note-list {
    width: 100%;
    padding: 1rem 0.667rem 0;
    box-sizing: border-box;

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 50px;
        grid-row-gap: 30px;

        li {
            font-size: 0.37rem;

            img {
                width: 100%;
                height: 4rem;
            }

            .title {
                margin-top: 10px;
            }
        }
    }
}
</style>